<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo left">
      <el-select
        v-model="getSearchInfo.logType"
        style="marginRight:3px;width:120px"
        clearable
        placeholder="请选择日志类型"
      >
        <el-option
          v-for="logType in logTypes"
          :key="logType.key"
          :label="logType.text"
          :value="logType.key"
        />
      </el-select>
      <el-select
        v-model="getSearchInfo.level"
        style="marginRight:3px;width:120px"
        clearable
        placeholder="请选择日志级别"
      >
        <el-option v-for="level in levels" :key="level.key" :label="level.text" :value="level.key" />
      </el-select>
      <el-select
        v-model="getSearchInfo.appCode"
        style="width:200px;marginLeft:3px;width:120px"
        placeholder="日志系统选择"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        v-model="getSearchInfo.keyword"
        placeholder="请输入日志内容"
        style="width:200px;marginLeft:3px;width:120px"
        :class="$style.Business"
      />
      <el-button type="primary" style="marginLeft:3px;" @click="searchInfoMation">搜 索</el-button>
    </div>
    <el-table ref="table" :data="tableData" border stripe :height="this.$getTableHeight">
      <el-table-column :show-overflow-tooltip="true" prop="id" label="编号" />
      <el-table-column :show-overflow-tooltip="true" prop="level" label="日志级别" />
      <el-table-column :show-overflow-tooltip="true" prop="timeStamp" label="日志时间" />
      <el-table-column :show-overflow-tooltip="true" prop="message" label="日志内容" />
      <el-table-column :show-overflow-tooltip="true" prop="logType" label="日志类型" />
      <el-table-column :show-overflow-tooltip="true" prop="exception" label="异常详情" />
    </el-table>
    <div class="pagination">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import mmUrl from "~/utils/utilUrl";
import Pagination from "~/components/commom/pagination";
export default {
  components: {
    Pagination
  },
  data() {
    return {
      visible2: false,
      loading: true,
      changeSelectOr: false,
      change: false,
      dics: [],
      orgs: [],
      defaultProps: {
        children: "children",
        label: "orgName"
      },
      options: [
        {
          label: "生意港",
          value: "TradeBridge"
        },
        {
          label: "企业版",
          value: "Multiple-households"
        }
      ],
      projectType: [],
      tableData: [], // talbe表格数据
      category: [],
      logTypes: [],
      levels: [],
      totalCount: 0,
      getSearchInfo: {
        // 筛选条件
        keyword: "",
        logType: "",
        level: "",
        appCode: "TradeBridge"
      },
      copyGetSearchInfo: {
        // 筛选条件
        keyword: "",
        logType: "",
        level: "",
        appCode: "TradeBridge"
      },
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      }
    };
  },
  mounted() {
    this.initGetDate();
  },
  methods: {
    handleNodeClick(res) {},
    searchInfo(res) {
      let data = {};
      if (res) {
        data = res;
      } else {
        data.page = JSON.parse(JSON.stringify(this.page));
        Object.assign(data, this.copyGetSearchInfo);
      }
      this.$monitorPost({
        url: mmUrl.log.getlogs,
        data: data
      }).then(res => {
        this.totalCount = res.items.totalCount;
        this.tableData = res.items.items;
      });
    },
    searchInfoMation(res) {
      res === "no" ? "" : (this.page.pageNo = 0);
      const result = {};
      result.page = JSON.parse(JSON.stringify(this.page));
      this.copyGetSearchInfo = JSON.parse(JSON.stringify(this.getSearchInfo));
      Object.assign(result, this.copyGetSearchInfo);
      this.searchInfo(result);
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      const result = {};
      result.page = JSON.parse(JSON.stringify(this.page));
      Object.assign(result, this.copyGetSearchInfo);
      this.searchInfo(result);
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      const result = {};
      result.page = JSON.parse(JSON.stringify(this.page));
      Object.assign(result, this.copyGetSearchInfo);
      this.searchInfo(result);
    },
    initGetDate() {
      const data = {};
      data.page = JSON.parse(JSON.stringify(this.page));
      Object.assign(data, this.copyGetSearchInfo);
      this.$monitorPost({
        url: mmUrl.log.pageLoad,
        data: data
      }).then(res => {
        this.totalCount = res.items.totalCount;
        this.tableData = res.items.items;
        this.logTypes = res.logTypes;
        this.levels = res.levels;
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" module>
.cont_top {
  height: 5 0px;
  .cost {
    display: inline-block !important;
    width: 102px;
  }
  .Business {
    width: 120px;
  }
  .cartgroy {
    display: inline-block !important;
    width: 120px;
  }
  input {
    border-radius: 5px;
  }
}
</style>

